The following workflow example demonstrates how to add a custom comment workflow to Pyramid. It is a basic setup mimic what the built-in conversation and annotation tools already do. In the marketplace, there is another example for a "Task" workflow that can be sued as a reference.
Note: this feature is available with an Enterprise license only.
Walk Through Example
Let us start design our new Workflow. Create a new Workflow by pressing the button in the Admin Console.
Start by adding the Workflow's settings. Fill the Workflow's name and description and set the icon for it.
Create Page
Next is to start building the Workflow's screens. We will start with the "Create Screen". From the Create Screen the user will create a new Thread from our Workflow's type.
The screen design begins with adding the screen's UI elements. Go to the HTML tab, by default you will see a "container" div, you can use it and code your needed HTML elements inside of it.
In our example we'll add three inputs with labels, one for "subject", one for "description" and one for "the first comment".
Click on the "Preview" button to see how it looks.
Next add the he logic behind the UI. Go to the "JavaScript" tab. You will see a "Main Function", this function is triggered before the screen is loaded. We will use the Main function to implement our logic and register for necessary events with the help of the API object.
The global API object, 'workflowApi', contains objects, functionality and attributes for building your Workflow. In our example we'll register the "OnFormLoad" event and initialize our HTML elements.
The "OnFormLoad" event triggers after the screen is loaded, so we can integrate it our HTML elements. Here we are using the API object, "workflowApi," to retrieve the thread's data, and set it in the HTML form input elements.
We now register 'onkeyup' event, so we will update the thread and the first entry when the user changes the input's text.
Next we check that our logic is working by clicking 'Preview' again. It should show the text for title and subtitle we gave him in the 'Test Json' tab.
Next we will set the styles for the screens. Notice that there are two tabs for CSS styles: "CSS Dark" and "CSS Light". Both of those tabs represent CSS styles for the screen. Each CSS style set will be activated for it's relevant theme in the system. In our example we will set the same CSS code for both.
We will set the width for the inputs, and a space between the inputs:
Clicking the "Preview Dark" button you can see that the styles are applying on the elements.
Lets next go to the "Settings" tab. Here we can manage the settings of the screen. In our example we going to set the height to be 300px.
View / Edit Page
Now we'll design the "View/Edit" screen. In our example, when the user enters an existing thread they will see old comments and be able to add new ones. But they will not be able to edit the thread details.
Go to the "Edit/View" tab. We are repeat similar steps to the "create" screen. First we'll set HTML elements.
- The Thread attributes as read only labels: title and description.
- We'll show old comments that were added.
- Allow input and a button for adding a new comment.
Next for JavaScript. We will access the main API object and set the data for the input elements. We'll display all of the old comments on the screen and let the user add new comments. Notice that we implemented the "onClick" event for adding a new comment. When the user clicks the button we will set the new comment as a new entry and save the thread.
To test the "View/Edit" page we need to change the "Test Json" so it will include some comments. We'll add elements to the "entries" attribute to represent the old comments.
Now when we can "Preview" our code and see that the screen is showing the data that we just added.
